<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      td,
      th {
        border: 1px solid #fff;
      }

      .dialog {
        width: 300px;
        background-color: #ccc;
      }

      .dialog .dialog_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        height: 40px;
        border-bottom: 1px solid #fff;
      }

      .dialog .dialog_footer {
        display: flex;
        align-items: center;
        height: 40px;
        border-top: 1px solid #fff;
      }

      .dialog .dialog_body {
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <!-- 
      具名插槽：
        概念：
          给 slot 元素设置一个 name 属性，那么该 slot 就是一个具有名字的插槽了

        作用：
          有时我们组件的插槽可能需要多个不同的插槽内容来填充。这时就需要用到具名插槽


        如果去用：

          1. 需要给 slot 加一个 name


          2. 插槽内容，需要包裹在一个 template 里面，且给该 template 设置 v-slot:xxx插槽名字

      v-slot 简写

        1. 
            v-slot:default

            #default

        2. 
            v-slot:default="scope"

            #default="scope"



     -->

    <div id="app"></div>

    <script src="../lib/vue3.js"></script>
    <script>
      const app = Vue.createApp({
        template: `
          <div>
            <h1>插槽</h1>

            <BaseDialog>
              

              <template #default>
                <button>按钮</button>
              </template>

              <template v-slot:footer>
                <a href="#">底部</a>  
              </template>

              <template v-slot:header>
                <i>我的天</i>
              </template>
              
            </BaseDialog>

            <hr />

            <BaseDialog>

              <template v-slot:[slotName]>
                <table>
                  <tbody>
                    <tr>
                      <td>1</td>  
                      <td>2</td> 
                    </tr>  
                  </tbody>  
                </table>
              </template>

            </BaseDialog>
          </div>
        `,

        data() {
          return {
            slotName: "default",
          };
        },
      });

      app.component("BaseDialog", {
        template: `
          <div class="dialog">
            <div class="dialog_header">
              <slot name="header">
                <span>提示</span>
                <button>关闭</button>
              </slot>
            </div>

            <div class="dialog_body">
              <slot>
                我是 body
              </slot>
            </div>

            <div class="dialog_footer">
              
              <slot name="footer">
                我是 footer
              </slot>

            </div>
          </div>   
        `,
      });

      app.mount("#app");
    </script>
  </body>
</html>
